<template>
  <section>
    <el-container>
      <el-main style="height: 650px">
        <el-form label-width="80px">
          <el-form-item v-for="(i,index) in item.data.vals" :key="index" :label="i.name">
            <el-row v-if="i.code === 'annualTrendList'">
              <el-col :span="12"  v-for="annualTrend in i.detail" :key="annualTrend.id" style="padding:0 15px 0 15px">
                <el-row>
                  <span style="font-weight:bold">☆{{annualTrend.name}}全年运势：</span>{{annualTrend.description}}
                </el-row>
                <el-row>
                  <img width="60%" :src="annualTrend.image"/>
                </el-row>
                <el-row>
                  <span style="font-weight:bold">☆全年易患：</span>{{annualTrend.ps}}
                </el-row>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-card shadow="hover" style="width: 90%">
                <el-table :data="i.detail">
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="六气" width="165px">
                    <template slot-scope="scope">
                      <el-row>
                        {{scope.row.trendName}} | {{scope.row.name}}之气
                      </el-row>
                      <el-row>
                        <span  style="font-size: 8px">{{scope.row.period[0]}} — {{scope.row.period[1]}}</span>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column label="健康趋势">
                    <template slot-scope="scope">
                      <span  style="font-size: 8px">您的以下情况会加重：</span><el-input size="mini" v-model="scope.row.healthDetail" type="textarea"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="注意事项">
                    <template slot-scope="scope">
                      <el-button type="text" style="color: green" @click="addCareful(scope.row)">添加</el-button>
                      <el-row v-for="(careful,i) in scope.row.careful" :key="i">
                        <el-col :span="1">{{i+1}}.</el-col>
                        <el-col :span="20"><el-input size="mini" v-model="scope.row.careful[i]"></el-input></el-col>
                        <el-col :span="1">
                          <i class="el-icon-remove-outline" style="color: red" @click="delCareful(scope.row.careful,i)"/>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-row>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <div style="margin-top: 20px">
      <div>
        <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
        <el-button type="danger" size="mini" @click="delPage">删除</el-button>
        <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
      </div>
      <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
      </div>
    </div>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  // import annualHealthTrend from "../../../sdk/api/annualHealthTrend";
  export default {
    name: "No9",
    props: ['currReport','item'],
    data() {
      return {
        annualTrendList:[],
        sixQi:[]
      }
    },
    created(){
      console.log(this.item)
      if(this.item.data.vals === undefined){
        Vue.set(this.item.data,'vals',[])
        let start=this.timeFormatter(this.currReport.currExamineDate)
        let end=this.timeFormatter(this.currReport.nextExamineDate)
        console.log(start)
        this.getAnnualTrendList(start,end)
        return
      }

    },
    mounted(){
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      savePage(){
        console.log(this.item.data.vals)
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      },
      timeFormatter(date){
        return DateFormat.format(date)
      },
      getAnnualTrendList(start,end){
        this.fetch({name:"getAnnualTrendList",data:{start,end}})
          .then(res=>{
            console.log(res)
            //组合年运图片和描述,用于显示及保存
            res.content.forEach(c=>{
              this.annualTrendList.push({name:c.name,image:c.image,id:c.id,description:c.description,ps:c.data.ps})
            })
            this.item.data.vals.push({name:'年运列表',detail:this.annualTrendList,code:'annualTrendList'})
            //做未来一年六气的表格数据
            this.makeSixQi(start,res.content)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      makeSixQi(start,content){
        //做一个年度列表内所有六气的数组
        let allSixQi=[]
        content.forEach(t=>{
          let trendName=t.name.slice(0,2)
          t.data.sixQi.forEach(q=>{
            q.trendName=trendName
            allSixQi.push(q)
          })
        })
        //在里面找第一个气的索引值
        let firstIndex=allSixQi.findIndex(q=> q.period[0]<=start && start<q.period[1])
        //往后+6个,共7个
        for(let i=0;i<7;i++){
          this.sixQi.push(allSixQi[firstIndex+i])
        }
        this.item.data.vals.push({name:'六气趋势',detail:this.sixQi,code:'sixQi'})
      },
      addCareful(row){
        console.log(row)
        if(row.careful === undefined){
          Vue.set(row,'careful',[])
        }
        row.careful.push('')
      },
      delCareful(carefuls,i){
        carefuls.splice(i,1)
      }
    }
  }
</script>

<style scoped>

</style>
